/**
 * 组件：搜索组件
 * Author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    Image,
    TouchableOpacity,
} from 'react-native';
import IconButton from "../component/comp.icon-button";
import SwitchButton from "../component/comp.switch-button";


class NavSearchBar extends Component {

    static propTypes = {
        onBack: PropTypes.func,
        searchText: PropTypes.string,
        showBackButton: PropTypes.bool,
        navigation: PropTypes.any,
        onSelectChanged: PropTypes.func,
        onRightPress: PropTypes.func,
        onSearchInputPress: PropTypes.func,
        readOnly: PropTypes.bool,
        placeHolder: PropTypes.string,
    }

    static defaultProps = {
        searchText: '',
        showBackButton: false,
        readOnly: true,
        placeHolder: '搜索您感兴趣的内容',
    }

    constructor(props) {
        super(props)
        this.state = {
            searchText: props.searchText,
            editMode: false,
        }
    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.searchText != this.props.searchText) {
            this.setState({
                searchText: nextProps.searchText,
            });
        }
    }


    onPressBack = () => {
        const {onBack} = this.props
        if (onBack) {
            onBack()
        }else{
            const {goBack} = this.props.navigation;
            goBack();
        }
    }

    genButtonItem(index, switchBtnStyle, onPress, title) {
        const {selectIndex} = this.props
        let activeBtnStyle = null;
        if (selectIndex == index) {
            activeBtnStyle = styles.switchBtnActive;
        }
        return (<IconButton style={[switchBtnStyle, activeBtnStyle]} textStyle={styles.switchBtnText} title={title}
                            onPress={onPress}/>);
    }

    onChangeSearchMode(editMode) {
        this.setState({
            editMode: editMode,
        })
    }

    genSearchUI() {
        const {onSearchInputPress, readOnly, placeHolder} = this.props
        if (readOnly) {
            return (
                <TouchableOpacity style={styles.searchViewContainer} onPress={onSearchInputPress}>
                    <View style={styles.searchView}>
                        <Image source={require('./../../img/icon_small_search.png')} style={styles.searchIcon}/>
                        <Text style={styles.searchText}>{placeHolder}</Text>
                    </View>
                </TouchableOpacity>
            );
        } else {
            const {editMode, searchText} = this.state;

            if (editMode) {
                return (
                    <View style={styles.searchViewContainer} onPress={onSearchInputPress}>
                        <View style={styles.searchView}>
                            <Image source={require('./../../img/icon_small_search.png')} style={styles.searchIcon}/>
                            <TextInput autoFocus={true} style={styles.searchTextInput} placeholder={placeHolder}
                                       onChangeText={(text) => this.setState({searchText: text})}
                                       value={searchText}></TextInput>
                        </View>
                    </View>
                );
            } else {
                const {searchText} = this.state
                const {placeHolder} = this.props
                const title = searchText == '' ? placeHolder : searchText;
                return (
                    <TouchableOpacity style={styles.searchViewContainer}
                                      onPress={this.onChangeSearchMode.bind(this, true)}>
                        <View style={styles.searchView}>
                            <Image source={require('./../../img/icon_small_search.png')} style={styles.searchIcon}/>
                            <Text style={styles.searchText}>{title}</Text>
                        </View>
                    </TouchableOpacity>
                );
            }

        }

    }


    genBackUI() {
        const {showBackButton} = this.props
        if (showBackButton) {
            return (
                <IconButton style={styles.btnFilter} textStyle={styles.btnText} title="返回" onPress={this.onPressBack}/>)
        }

    }

    onRightPressBtn=()=>{
        const {onRightPress} = this.props;
        const {searchText} = this.state;
        if(onRightPress){
            onRightPress(searchText)
        }
    }

    genFilterUI() {

        return (<IconButton style={styles.btnFilter} textStyle={styles.btnText} title="搜索" onPress={this.onRightPressBtn}/>)
    }

    render() {
        const {onPress} = this.props
        return (
            <View style={styles.container}>
                <View style={styles.leftPanel}>
                    {this.genBackUI()}
                </View>
                <View style={styles.midPanel}>
                    {this.genSearchUI()}
                </View>
                <View style={styles.rightPanel}>
                    {this.genFilterUI()}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 64,
        paddingTop: 20,
        flexDirection: 'row',
        backgroundColor: Color.PRIMARY_COLOR,
    },
    leftPanel: {
        width: 60,
        justifyContent: 'center',
        // borderWidth:1,
        // borderColor:'red',
    },
    midPanel: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        // borderWidth:1,
        // borderColor:'red',
    },
    rightPanel: {
        width: 60,
        alignItems: 'flex-end',
        justifyContent: 'center',
        // borderWidth:1,
        // borderColor:'red',
    },
    btnSwitchGroup: {
        width: 150,
        flexDirection: 'row',
        // borderWidth:1,
        // borderColor:'red',
    },
    switchBtnLeft: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#0ABB07',
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
        backgroundColor: 'transparent',
    },
    switchBtnRight: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#0ABB07',
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0,
        backgroundColor: 'transparent',
    },
    switchBtnText: {
        fontSize: 16,
    },
    switchBtnActive: {
        backgroundColor: '#0ABB07'
    },
    btnFilter: {
        height: 30,
        backgroundColor: 'transparent',
    },
    btnText: {
        color: 'white',
        fontSize: 18,
    },

    searchViewContainer: {
        flex: 1,
        height: 30,
    },
    searchView: {
        flex: 1,
        height: 30,
        borderRadius: 15,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        paddingLeft: 8,
        paddingRight: 8,
    },
    searchIcon: {
        width: 14,
        height: 14,
        marginRight: 8,
    },
    searchText: {
        color: '#9C9C9C',
        fontSize: 14,
    },
    searchTextInput: {
        color: '#4a4a4a',
        fontSize: 14,
        flex: 1,
    },
});

export default NavSearchBar;